<template>
  <div class="home_info">
    <div class="home_info_top" :class="{ flex_left_right: !isMobile(), home_info_top_m: isMobile() }">
      <div class="flex_right domain_contnet p_t_40">
        <div class="row_content">
          <div class="info_title font_16"> </div>
          <div class="domain_row">
            <div v-for="(item, index) in domainData.dataList" :key="index" class="domain_test font_12 p_d_16 line_height_16">{{ item.label }}</div>
          </div>
        </div>
      </div>

      <div class="flex_right phone_contnet p_t_40">
        <div class="row_content">
          <div class="info_title font_16 m_b_32">{{ phoneData.title }}</div>
          <div v-for="(item, index) in phoneData.dataList" :key="index" class="phone_test font_12 line_height_16 m_b_16">{{ item.label }}</div>
        </div>
      </div>

      <!-- <div class="flex_right offic_contnet p_t_40">
        <div class="row_content">
          <div class="info_title font_16 m_b_32">{{ officialData.title }}</div>
          <div v-for="(item, index) in officialData.dataList" :key="index">{{ item.label }}</div>
        </div>
      </div> -->
    </div>
    <div class="home_info_bottom font_12 line_height_24 pd_10">
      <div>
        <span>Copyrightⓒ  2025最车（河南）数字科技有限公司  版权所有 </span>
        <img :src="getImageUrl('ba')" class="ba_img" />
        <span> 豫ICP备2025118353号</span>
      </div>
      <div>技术支持：最车科技</div>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { ref } from 'vue'
  import { isMobile } from '@/utils'
  import { getImageUrl } from '@/utils'

  interface DataInterface {
    title?: string
    dataList: { label: string; icon?: string; callback?: () => {} }[]
  }
  const domainData = ref<DataInterface>({
    dataList: [{ label: '关于最车' }, { label: '产品介绍' }, { label: '联系我们' }, { label: '企业资讯' }, { label: '招贤纳士' }],
  })

  const phoneData = ref<DataInterface>({
    title: '联系我们',
    dataList: [
      { label: '地址：郑州市经开区航海东路1508号中大门3号楼1层10号' },
      { label: '电话：0371-61802226' },
      { label: '网址：http://www.zuiche.com' },
      { label: '邮箱：wangzengfa@haigouhaoche.com' },
    ],
  })
  const officialData = ref<DataInterface>({
    title: '关注我们',
    dataList: [
      { label: '地址：郑州市经开区航海东路1508号中大门3号楼1层10号' },
      { label: '电话：0371-61802226' },
      { label: '网址：http://www.zuiche.com' },
      { label: '邮箱：wangzengfa@haigouhaoche.com' },
    ],
  })
</script>
<style scoped lang="less">
  .home_info_top {
    background: #242a2f;
    color: #bbbbbb;
    padding-bottom: 40px;
    .info_title {
      color: #ffffff;
    }
    .domain_test,
    .phone_test {
      color: #bbbbbb;
    }
    .domain_contnet {
      .domain_row {
        padding: 60px 200px;
        overflow: hidden;
      }
      .domain_test {
        width: 33.33%;
        float: left;
        text-align: center;
      }
    }
    .phone_contnet {
      .phone_test:last-child {
        margin-bottom: 0;
      }
    }
  }

  .home_info_bottom {
    text-align: center;
    background: #14171a;
    color: #8c8c8c;
  }
  .home_info_top_m {
    text-align: center;
    .domain_contnet {
      .domain_row {
        overflow: hidden;
        padding: 0;
      }
      .domain_test {
        text-align: center;
      }
    }
  }
</style>
